<template>
    <div class="CashLog">
      <tab>
        <tab-item selected @on-item-click="toggleTab('cny')">CNY</tab-item>
        <tab-item  @on-item-click="toggleTab('sac')">SAC</tab-item>
      </tab>
      <div class="drop-down">
        <select v-model="selected" @change="onSelectedDrug(selected)">
          <option value="" v-for="option in options" v-bind:value="option.value"> {{ option.text }}</option>
        </select>
      </div>
      <div class="scroll-box">
        <scroller
          :on-refresh="refresh"
          :on-infinite="infinite"
          :noDataText="$t('no more')"
          ref="myScroller"
        >
        <div class="list-container">
          <ul>
            <li class="list-item" v-for="i in newData" v-if="type === 'cny'">
              <div class="header">
                  <div class="left vux-1px-r">
                      <p>{{$t('cash_type')}}： <span>{{i.type === 1 ? $t('cash_trde'):$t('cash_reward')}}</span></p>
                      <p>{{$t('cash_status')}}： <span style="color: #cc0000" v-if="i.cny > 0">{{$t('shouru')}}</span><span style="color: #0BB20C" v-else>{{$t('zhichu')}}</span></p>
                  </div>
                  <div class="right">
                    <p>{{$t('cash_num')}}： <span style="color: #cc0000" v-if="i.cny > 0">{{i.cny}}</span><span style="color: #0BB20C" v-else>{{i.cny}}</span></p>
                    <p>{{$t('cash_coin')}}： <span>CNY</span></p>
                  </div>
              </div>
              <div class="detail vux-1px-t">
                <p >{{$t('cash_detail')}}：<span>{{i.desc}}</span></p>
                <p >{{$t('cash_time')}}：<span>{{i.change_time}}</span></p>
              </div>
            </li>
            <li class="list-item" v-for="i in newData"  v-if="type === 'sac'">
              <div class="header">
                <div class="left vux-1px-r">
                  <p>{{$t('cash_type')}}： <span>{{i.type === 1 ? $t('cash_trde'):$t('cash_reward')}}</span></p>
                  <p>{{$t('cash_status')}}： <span style="color: #cc0000" v-if="i.sac > 0">{{$t('shouru')}}</span><span style="color: #0BB20C" v-else>{{$t('zhichu')}}</span></p>
                </div>
                <div class="right">
                  <p>{{$t('cash_num')}}： <span style="color: #cc0000" v-if="i.sac > 0">{{i.sac}}</span><span style="color: #0BB20C" v-else>{{i.sac}}</span></p>
                  <p>{{$t('cash_coin')}}： <span>SAC</span></p>
                </div>
              </div>
              <div class="detail vux-1px-t">
                <p >{{$t('cash_detail')}}：<span>{{i.desc}}</span></p>
                <p >{{$t('cash_time')}}：<span>{{i.change_time}}</span></p>
              </div>
            </li>
          </ul>
          <no-data :nomore="false" v-if="showNodata"></no-data>
        </div>
        <!--<div class="cash-list">-->
          <!--<ul v-if="type === 'cny'">-->
                <!--<li v-for="i in newData" >-->
                    <!--<div class="left">-->
                      <!--<p class="p1">{{i.desc}}</p>-->
                      <!--<p class="p2">{{i.cny}}</p>-->
                    <!--</div>-->
                    <!--<div class="right">-->
                      <!--<p class="p3" :style="{color:i.color}">{{i.num}}</p>-->
                      <!--<p class="p4">{{i.change_time}}</p>-->
                    <!--</div>-->
                <!--</li>-->
            <!--</ul>-->
          <!--<ul v-if="type === 'sac'">-->
            <!--<li v-for="i in newData">-->
              <!--<div class="left">-->
                <!--<p class="p1">{{i.desc}}</p>-->
                <!--<p class="p2">{{i.sac}}</p>-->
              <!--</div>-->
              <!--<div class="right">-->
                <!--<p class="p3" :style="{color:i.color}">{{i.num}}</p>-->
                <!--<p class="p4">{{i.change_time}}</p>-->
              <!--</div>-->
            <!--</li>-->
          <!--</ul>-->
          <!--<no-data :nomore="false" v-if="showNodata"></no-data>-->
        <!--</div>-->
        </scroller>
      </div>
    </div>
</template>

<i18n>
  total:
    en: Total
    zh-CN: 全部
  zhichu:
    en: Paying
    zh-CN: 支出
  shouru:
    en: Earning
    zh-CN: 收入
  reword:
    en: Award
    zh-CN: 奖励
  cash_type:
    en: Type
    zh-CN: 类型
  cash_status:
    en: Status
    zh-CN: 状态
  cash_num:
    en: Number
    zh-CN: 数量
  cash_coin:
    en: CoinType
    zh-CN: 币种
  cash_detail:
    en: Detail
    zh-CN: 详情
  cash_time:
    en: Time
    zh-CN: 时间
  cash_trde:
    en: Trde
    zh-CN: 交易
  cash_reward:
    en: Reward
    zh-CN: 奖励
</i18n>

<script>
  import {Cell, Group, Tab, TabItem} from 'vux'
  import noData from '../components/nodata'
  export default {
    name: 'CashLog',
    components: {
      Cell,
      Group,
      Tab,
      TabItem,
      noData
    },
    data () {
      return {
        test: true,
        newData: [],
        type: 'cny',
        selected: '2',
        options: [
          { text: this.$t('total'), value: '2' },
          { text: this.$t('zhichu'), value: '0' },
          { text: this.$t('shouru'), value: '1' },
          { text: this.$t('reword'), value: '3' }
        ],
        showNodata: false,
        page: 1,
        pageCount: 10,
        scrollLoading: true //  是否是在加载中
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      // 滚动加载
      infinite (done) {
        if (!this.scrollLoading) {
          this.getInfo(done)
        } else {
          this.$refs.myScroller.finishInfinite(true)
        }
      },
      // 上拉加载
      refresh (done) {
        this.page = 1
        this.newData = []
        this.getInfo(done)
      },
      onSelectedDrug (index) {
        this.selected = index
        this.page = 1
        this.newData = []
        this.getInfo()
      },
      toggleTab (type) {
        this.type = type
        this.page = 1
        this.newData = []
        this.getInfo()
      },
      getInfo (done) {
        this.scrollLoading = true
        let vue = this
        let url = 'api/logging/financiallog'
        let showLoading
        vue.page === 1 ? showLoading = true : showLoading = false
        vue.post({
          url: url,
          showloading: showLoading,
          params: {
            token: localStorage.token,
            type: vue.type,
            listRows: vue.pageCount,
            page: vue.page,
            status: vue.selected
          },
          success: function (data) {
            if (data.code === 1) {
              data.data.data.length === 0 ? vue.showNodata = true : vue.showNodata = false
              if (data.data.data.length === 0) {
                // 如果没有更多数据在 不能再加载
                vue.scrollLoading = true
              } else if (data.data.data.length === vue.pageCount) {
                vue.newData = vue.newData.concat(data.data.data)
                // 有数据可以继续加载
                vue.scrollLoading = false
                vue.page = vue.page + 1
                vue.$refs.myScroller.finishInfinite(true)
              } else {
                vue.newData = vue.newData.concat(data.data.data)
                // 有数据可以继续加载
                vue.scrollLoading = true
                vue.$refs.myScroller.finishInfinite(true)
              }
              done(true)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/1px.less';
    .CashLog{
        font-size: 0.3rem;
         height: 100%;
      .scroll-box {
        height: calc(~'100% - 44px - .8rem');
        position: relative;
      }
      .cash-list ul{
        border: none;
      }
    }
    .CashLog h5{
        height: 0.9rem;
        line-height: 0.9rem;
        margin: 0;
        font-weight: normal;
        background-color: #537fbf;
        color: #fff;
        display: flex;
    }
    .CashLog h5 a{
        font-size: 0.4rem;

        text-decoration: none;
        color: #fff;
        flex-grow: 1;
        margin-left: 0.4rem;
    }
    .CashLog h5 span{
        flex-grow:2 ;
        padding-left: 1rem;
    }
    .nav-tab{
        display: flex;
        list-style: none;
        height: 1rem!important;
        margin: 0;
        line-height: 1rem;
    }
    .nav-tab li{
        flex-grow: 1;
        text-align: center;
    }
    .nav-tab li a{
        color: #666;
        width: 1.8rem;
    }
    .nav-tab li div{
        width: 1.8rem;
        margin: 0 auto;
    }
    .nav-tab li a:hover{
        color: #7294c8;
    }
    .nav-tab li div:hover{
        border-bottom: 2px solid #7294c8;
    }
    .drop-down{
        height: .8rem;
        background-color: #fafafa;
    }
    .drop-down select{
      appearance:none;
      outline: none;
        width: 1.45rem;
        height: .8rem;
        color: #666666;
        background-color:#fafafa;
        margin-right: 0.5rem;
        padding-left: 0.3rem;
        border: none;
        font-size: 0.28rem;
        float: right;
      background: url("../assets/img/down.png") no-repeat scroll right center transparent;
    }
    .cash-list ul li{
        display: flex;
    }
    .cash-list .left{
        flex-grow: 1;
      margin-left: 0.39rem;
    }
    .cash-list .right{
        flex-grow: 1;
        text-align: right;
        padding-right: 0.5rem;
    }
    p{
      line-height: 0.8rem;
      font-size: 0.28rem;
    }
    .cash-list .p1{
        color: #666666;
    }
    .cash-list .p2{
        color: #999999;
    }
    .cash-list .p3{
        color: #333333;
    }
    .cash-list .p4{
        color: #999999;
    }
    .cash-list .p5{
        color: #f4721c;
    }
    .cash-list ul{
        border-bottom: 1px solid #fafafa;
    }
    .list-container {
      background-color: #f2f2f2;
      .list-item {
        padding: .1rem .2rem;
        border-bottom: 1px solid #dfdfdf;
        background-color: #fff;
        margin-bottom: .2rem;
        p {
          line-height: 1.6;
          color: #898989;
          span {
            color: #333;
          }
        }
        .header {
          display: block;
          display: -webkit-flex;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          .left, .right {
            width: 100%;
            padding: 0 .1rem;
          }
          .left {
            padding-left: 0;
          }
        }
        .detail {
          margin-top: .1rem;
          padding-top: .1rem;
        }
      }
    }
</style>
